---
title: 토글
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

<Tabs>
<Tab title="Usage">

```jsx
import { Toggle } from "twenty-ui/input";

export const MyComponent = () => {
  return (
    <Toggle
    value = {true}
    onChange = {()=>console.log('On Change event')}
    color="green"
    toggleSize = "medium"
    />
  );
};
```

</Tab>
<Tab title="Props">

| 프로퍼티     | 유형       | 설명                                                                                       | 기본값          |
| -------- | -------- | ---------------------------------------------------------------------------------------- | ------------ |
| 값        | 부울       | 현재 토글의 상태                                                                                | `거짓`         |
| onChange | function | 토글 상태가 변경될 때 호출되는 콜백 함수                                                                  |              |
| 색상       | 문자열      | Color of the toggle when it\                                                            | s blue color |
| 토글 크기    | 문자열      | 토글의 크기는 높이와 너비에 영향을 미칩니다. 옵션은 'small'과 'medium' 두 가지입니다. | 중간           |

</Tab>
</Tabs>
